import React, { useState } from 'react'
import styles from './index.module.scss'
import NavBar from '@/components/NavBar'
import Textarea from '@/components/Textarea'
import Input from '@/components/Input'
import { useSelector } from 'react-redux'
export default function EditInput({ onCloseProp, type, onCommit }) {
  const defaultValue = useSelector(state => state.profile.profile[type])
  // console.log(defaultValue);
  const [value, setValue] = useState(defaultValue || '')
  // console.log(type);
  return (
    <div className={styles.root}>
      <NavBar leftClick={onCloseProp} extra={<span className='commit-btn' onClick={() => onCommit(type, value)}>提交</span>}>
        编辑{type === 'name' ? '昵称' : '简介'}
      </NavBar>
      <div className="content">
        <h3>{type === 'name' ? '昵称' : '简介'}</h3>
      </div>
      {
        type === 'name' ?
          <Input
            autoFocus
            className='input-wrap'
            value={value}
            onChange={(e) => { setValue(e.target.value) }}
          >
          </Input> :
          <Textarea
            value={value}
            onChange={(e) => { setValue(e.target.value) }}
          >
          </Textarea>
      }
    </div>
  )
}
